import React, { useEffect, useState } from 'react'
import '@/style/main/tabItem.scss'
import config from 'components/common/Common'
import useActive from 'hooks/useActive'

export default function TableItem({ file, activeID, unsaveIds, onTabClick, onCloseTab }) {
    const [isSave, setIsSave] = useState(false)
    const active = useActive(file.id, activeID);
    const { IconFont } = config
    useEffect(() => {
        if (unsaveIds.includes(file.id)) {
            setIsSave(false)
        } else {
            setIsSave(true)
        }
    }, [file.id, unsaveIds])
    return (
        <div
            className='tabItem'
            style={{
                backgroundColor: (active ? '#0066FF' : '#fff')
            }}
            onClick={() => { onTabClick(file.id) }}
        >
            <p
                className='tabItem-title'
                style={{
                    color: (active ? '#fff' : '#0066FF')
                }}
            >
                {file.title}
            </p>
            <IconFont
                type='iconicon_wrong'
                className='tabItem-icon'
                style={{
                    color: (active ? '#fff' : '#bbb')
                }}
                onClick={(e) => { e.stopPropagation(); onCloseTab(file.id) }}
            />
            {
                isSave ? null : <div
                    className='tabItem-circle'
                    style={{
                        backgroundColor: (active ? '#fff' : '#ccc')
                    }}
                ></div>
            }
        </div>
    )
}
